<template>
  <div class="flow-box">
    <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
        max-height="80vh"
        empty-text="暂无数据"
    >
      <el-table-column
          fixed
          prop="flow_index"
          label="ID"
          width="60"
          align="center"
      />
      <el-table-column
          prop="flow_uploader_name"
          label="申请人"
          width="100"
          align="center"
      />
      <el-table-column
          label="申请时间"
          width="120  "
          align="center"
      >
        <template #default="{row}">
          {{computeDate(row.created_at)}}
        </template>
      </el-table-column>
      <el-table-column
          prop="type"
          label="审批类型"
          align="center"
          width="120"
      >
        <template #default="{row}">
          <el-tag v-if="row.flow_type === 0">请假</el-tag>
          <el-tag v-else-if="row.flow_type === 1">用印</el-tag>
          <el-tag v-else>报销</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          align="center"
          width="120"
      >
        <template #default="{row}">
          <el-tag type="info" v-if="row.status === 0">已提交</el-tag>
          <el-tag type="warning" v-else-if="row.status === 1">审批中</el-tag>
          <el-tag type="success" v-else>已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="当前结果"
          align="center"
          width="120"
      >
        <template #default="{row}">
          <el-tag type="warning" v-if="row.result === 0">拒绝</el-tag>
          <el-tag type="success" v-else-if="row.result === 1">通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="operator_name"
          label="当前/最后审批人"
          align="center"
          width="150"
      />
      <el-table-column
          prop="flow_detail"
          label="理由/说明/备注"
          width="550"
          align="center"
      />
      <el-table-column
          label="操作"
          align="center"
      >
        <template #default="{row}">
          <el-button
              type="primary"
              size="small"
              @click="showDetails(row.application_id)"
          >
            详情
          </el-button>
          <el-button
              type="primary"
              size="small"
              @click="delDetails(row.application_id,row.status)"
          >
            撤销
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <PreViewDialog ref="previewDialog"/>
</template>

<script setup>
import {ElTable, ElTableColumn, ElTag, ElButton, ElMessage, ElDialog, ElMessageBox} from "element-plus"
import {onMounted, reactive, ref} from "vue"
import {getALLFlowList, getUptopHandled, recallFlow} from "@/api"
import emitter from "@/lib/eventBus.js"
import PreViewDialog from "@/components/Common/OA/PreViewDialog.vue"
import {useRoute, useRouter} from "vue-router"
import {createMsg} from "@/lib/utils"


const route = useRoute()
const router = useRouter()


const previewDialog = ref()
const tableData = ref([])
const detail = ref()
const userId = ref('')


onMounted(()=>{
  emitter.emit('home_menu','/OA/my-leave/list')
  emitter.emit('updateMyLeave','/OA/my-leave/list')
  if (route.path !== '/OA/my-leave/list') router.push('/OA/my-leave/list')
  userId.value = getId()
  getList()
  emitter.on('reload',()=>{
    getList()
  })
  if(route && route.query){
    //直接刷新
  }
})

const getId = () => {
  const info = JSON.parse(localStorage.getItem('syhyDocManSys'))
  return info.id
}

const getList = async () => {
  try {
    const {data:res} = await getALLFlowList({
      userId : userId.value
    })
    if(res && res.code === 201){
      // return ElMessage({
      //   type:'info',
      //   message:'暂无请假申请'
      // })
    } else if (res && res.code === 200) {
      tableData.value = res.data
    }
  } catch (exception) {
    console.log(exception)
  }
}

const showDetails = async (id) => {
  try {
    previewDialog.value.showDetails(id)
  } catch (e) {
    console.log(e)
  }
}


const recall = async (id,status) => {
  if(status === 2){
    return ElMessage({
      message:'已完成的流程不能撤回!',
      type:'error'
    })
  }
  try {
    const confirm = window.confirm('撤销后该流程无法恢复,确认操作吗?')
    if (confirm){
      const {data:res}=await recallFlow({
        flowId:id
      })
      if (res.code === 200){
        await getList()
        createMsg('撤回成功!','success')
      } else if (res.code ===400 || res.code === 401){
        createMsg('撤回失败','warning')
      }
    }
  } catch (error) {
    // 如果点击取消或者发生其他错误，则处理错误
    console.log(error)
  }
}


const computeDate = (date) => {
  return date.substring(0,10)
}

</script>

<style scoped lang="less">
.detail-box{
  box-sizing: border-box;
  height: 95%;
  .leave-detail-box{
    width: 95%;
    margin: 3vh auto;
    .top{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      display: flex;
      flex-direction: column;
      margin-top: 2vh;
      .t1{
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        display: flex;
        justify-content: space-between;
        .t1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t1-title{
            font-weight: 600;
            text-align: center;
            width: 30%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .t2{
        width: 100%;
        font-size: 1.6vh;
        background-color:#fff;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .t2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .t2-title{
            font-weight: 600;
            text-align: center;
            width: 15%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .t2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
    }
    .bot{
      background-color:#fff;
      border: 1px solid rgb(238,238,238);
      //border-left: none;
      margin-top: 3vh;
      display: flex;
      flex-direction: column;
      .b1{
        display: flex;
        width: 100%;
        font-size: 1.6vh;
        border-bottom: 1px solid rgb(238,238,238);
        height: 5vh;
        line-height: 5vh;
        .b1-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b1-title{
            font-weight: 600;
            text-align: center;
            width: 49%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b1-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
      .b2{
        background-color:#fff;
        width: 100%;
        font-size: 1.6vh;
        height: 5vh;
        line-height: 5vh;
        display: flex;
        .b2-item{
          width: 100%;
          display: flex;
          justify-content: left;
          .b2-title{
            font-weight: 600;
            text-align: center;
            width: 14%;
            background-color: rgb(250,250,250);
            border-left: 1px solid rgb(250,250,250);
            border-right: 1px solid rgb(250,250,250);
          }
          .b2-con{
            text-align: left;
            background-color: #fff;
            width: 60%;
            padding-left: 1vw;
          }
        }
      }
    }
  }
}
:deep(.el-dialog__header ){
  text-align: left !important;
  font-weight: 600;
}
:deep(.el-dialog__body){
  padding: 0 !important;
}
</style>
